<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>基本图片</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form" id="restForm">
            <div class="layui-form-item">
                <label class="layui-form-label required">图片名称</label>
                <div class="layui-input-block">
                    <!--thymeleaf通过隐藏域去 model 传值  th:value="${user.userName}"      -->
                    <input type="text" name="imgName" lay-verify="required" lay-reqtext="管理账号不能为空"
                           placeholder="请输入管理账号"  class="layui-input">
                    <!--<tip>填写自己管理账号的名称。</tip>-->
                </div>
            </div>

            <div class="layui-form-item">
                <!--隐藏域存储图片路径 imgPath-->
                <input type="hidden" name="imgPath" required id="imgPath">
                <label class="layui-form-label " required>图片上传</label>
                    <!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
                    <!--    <legend >拖拽上传</legend>-->
                    <!--</fieldset>-->
                    <!--id 绑定上传操作id-->
                    <div class="layui-upload-drag" id="uploadImgFile">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div style="width: 196px;">
                            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="filterImg">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                    </div>
                    <img id="strImg"  src="" alt="上传成功后渲染"  style="max-width: 196px; visibility: hidden">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">图片类型</label>
                <div class="layui-input-block">
                    <select name="imgType" lay-filter="aihao">
                        <option value=""></option>
                        <option value="人物" selected="">人物</option>
                        <option value="风景" >风景</option>
                        <option value="生活">生活</option>
                        <option value="旅游">旅游</option>
                        <option value="美食">美食</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图片等级</label>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend id="test5" name="pleve"></legend>
                    <input type="hidden" required name="pleveNum" id="pleveNum">
                </fieldset>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">图片描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="imgDesc" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked="" name="imgOpen" lay-skin="switch"
                           lay-filter="switchTest" lay-text="ON|OFF">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上传时间</label>
                <div class="layui-input-block">
                    <input type="email" id="createTime" name="createTime" lay-verify="required"
                           placeholder="上传时间"  value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form','miniTab','rate','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniTab = layui.miniTab,
            rate = layui.rate,
            //加入日期主键
            laydate = layui.laydate,
            upload = layui.upload,
            element = layui.element,
            $ = layui.jquery;
        //拖拽上传
        upload.render({
            //绑定上传 属性
            elem: '#uploadImgFile',
            //url: 'https://httpbin.org/post', //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            url: "uploadFilesImgCloud",     //uploadFiles
            accept: "image",  //指定上传文件类型
            acceptMime: "image/*,image/webp,image/jfif", //选择上传文件类型
            auto: true, //自动上传操作
            //field: "imgPath",
            choose: function(obj){      //文件上传之前的回调

            },

            before: function(res) {
                //预读本地文件示例，不支持ie8
                res.preview(function (index, file, result) {
                    console.log(result);
                    $('#strImg').css('visibility','visible');//
                    $('#strImg').attr('src', result); //图片链接（base64）
                    //$("#imgPath").val(result);
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res) {   //执行上传请求后的回调
                console.log(res + "res");
                if (res.code == 0){
                    layer.msg(res.message,{icon:6,time:1000});
                    console.log(res.data);
                    $("#imgPath").val(res.data);

                }
            },
            //进度条
            progress: function(n, elem, e){
                element.progress('filterImg', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }

            },

            error(){

            },

        });
        laydate.render({
            elem: "#createTime",
            type: "date",
            value: new Date(),
        });
        //自定义文本
        rate.render({
            elem: '#test5'
            ,value: 3
            ,text: true
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                    ,'5': '极好'
                };
                this.span.text(arrs[value] || ( value + "星"));
                $("#pleveNum").val(value);
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.imgOpen
            $.ajax({
                type: "post",
                url: "saveImg",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data.field),
                success: function (data) {
                    if (data.code == 0){
                        layer.msg(data.message,{icon:6,time: 1000},function () {
                            // layer.form.reload();
                            window.location.reload();
                        });
                    }else {
                        layer.msg(data.message,{icon:5,time: 1000},function () {
                            window.location.reload();
                        });
                    }
                    $("#restForm")[0].reset();
                    layer.form.render();
                }
            });


            // var index = layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // }, function () {
            //     layer.close(index);
            //     miniTab.deleteCurrentByIframe();
            // });

    });

    });
</script>
</body>
</html>